<!-- 首页 -->
<template>
  <div class="home">
    <div class="top">
      <img :src="config.banner" style="width:100%" />
    </div>
    <div class="tq">
      <div>
        <img src="../assets/images/weathercn/7.png" v-if="tq.condition == '小雨'"
          style="width:50px;height:50px;margin:5px" />
        <img src="../assets/images/weathercn/0.png" v-else-if="tq.condition == '晴天'"
          style="width:50px;height:50px;margin:5px" />
        <img src="../assets/images/weathercn/0.png" v-else style="width:50px;height:50px;margin:5px" />

      </div>
      <div style="display: flex;flex-direction:column;width:100%">
        <div style="margin:5px;display: flex;flex-direction:row;justify-content: space-between">

          <span style="	width:30%;text-align: center;">{{ tq.condition }}</span>

          <span style="	width:70%;text-align: right;padding-right: 10px;">
            {{ day }} {{ week }}
          </span>
        </div>
        <div style="display: flex;flex-direction:row;margin:5px;width:100%;justify-content: space-between">

          <div style="	width:30%;"> {{ tq.temp }}℃</div>
          <div style="width:30%;	"> 风力:{{ tq.windLevel }}级</div>
          <div style="width:30%;"> 湿度：{{ tq.humidity }}%</div>

        </div>

      </div>

      <div></div>
    </div>
    <div class="center">
      <!-- tab栏 -->
      <div class="tab">

        <div v-for="item in tabs" :key="item.id" :class="active === item.id ? 'active' : ''"
          @click="tabChange(item.id)">{{ item.areaname }}</div>
      </div>
      <!-- 设备 -->
      <div class="home-equiment">
        <div class="e-item" v-for="item in items" :key="item.id" @click="device(item)">
          <div class="left">
            <div>{{ item.name }}</div>
            <div v-if="item.num != null">{{ item.num }}个设备</div>
          </div>
          <div class="right">
            <van-image width="50" height="50" :src="item.url" />
          </div>
        </div>

        <!-- 添加设备 -->
        <div class="add" @click="addarea">
          <van-image width="30" height="30" :src="addicon" />
          <span>添加池塘</span>
        </div>
      </div>
      <!-- 商品 -->
      <van-tabs v-model="bottomactive" background="none" animated sticky color="rgb(51,51,51)" @click="typegood">
        <van-tab :title="item.name" v-for="item in cate" :key="item.id">
          <van-grid :gutter="10" column-num="2" style="margin-top: 15px" icon-size="120px">

            <van-grid-item @click="goitem(value)" style="border-radius: 15px !important" v-for="value in goods"
              :key="value" :icon="value.imgurl">
              <template #text>
                <div class="text">
                  <p>{{ value.goods_name }}</p>
                  <span>￥</span> <span>{{ value.goods_price }}</span>
                </div>
              </template>
            </van-grid-item>
          </van-grid>
        </van-tab>

      </van-tabs>
    </div>
  </div>
</template>

<script>

import Bus from '../utils/bus.js'
import { areaList } from "../api/area";
import { getConfig, getTq } from "../api/index";
import { cateList } from "../api/cate";
import { goodsList } from "../api/goods";

export default {
  name: "",
  data() {
    return {
      active: 1,
      bottomactive: "饲料",
      addicon: require("../assets/images/添加.png"),
      items: [
        {
          id: 1,
          name: "水质仪",
          num: 0,
          url: require("../assets/images/shuizhiyi.png"),
        },
        {
          id: 2,
          num: 0,
          name: "智能开关",
          url: require("../assets/images/智能开关.png"),
        },
        {
          id: 3,
          num: 0,
          name: "摄像头",
          url: require("../assets/images/摄像头.png"),
        },
        {
          id: 4,
          num: null,
          name: "天气记录",
          url: require("../assets/images/tianqi.png"),
        },
      ],
      tabs: [
        {
          id: 1,
          label: "渔塘1",
        },
        {
          id: 2,
          label: "渔塘2",
        },
        {
          id: 3,
          label: "渔塘3",
        },
      ],
      goodslist: [],
      config: {},
      tq: "",
      day: "",
      week: "",
      cate: [],
      goods: [],
      search: {
        bigtypeid: ""
      }
    };
  },
  methods: {
    goitem(uitem) {
      this.$router.push({ path: "/goods-details", query: { id: uitem.id } });
    },
    typegood(index) {
      console.log("uitem", index);
      this.search.bigtypeid = this.cate[index].id;
      this.getGoods();
    },
    tabChange(val) {
      console.log("val", val);

      var list = this.tabs;
      var item = "";
      for (var i = 0; i < list.length; i++) {
        if (list[i].id == val) {
          item = list[i];
          break;
        }
      }
      if (item != "") {
        this.items[0].num = item.sensor_num;
        this.items[1].num = item.device_num;
        this.items[2].num = item.camera_num;
      }
      this.active = val;
    },
    addarea() {
      this.$router.push({ path: '/addarea', query: {} });
    },
    device(uitem, index) {

      console.log("uitem", uitem);

      if (uitem.name == "天气记录") {

        this.$router.push({ path: '/tq-list', query: {} });
      } else {

        this.$router.push({ path: '/equipment-list', query: { type: uitem.name, aid: this.active } });
      }

    },
    async getarea() {
      var res = await areaList({ userid: localStorage.getItem("userid") });
      if (res.status == 200) {
        var list = res.data;
        if (list.length > 0) {
          this.active = list[0].id;
          let item = list[0];


          this.items[0].num = item.sensor_num;
          this.items[1].num = item.device_num;
          this.items[2].num = item.camera_num;
        }
        this.tabs = list;
      }


    },
    async getGoods() {
      let goods = await goodsList(this.search);
      if (goods.status == 200) {
        this.goods = goods.data;
      }
    },
    async init() {
      let res = await getConfig();
      if (res.status == 200) {
        this.config = res.data;
      }


      let cate = await cateList();
      if (cate.status == 200) {
        this.cate = cate.data;
        let list = cate.data;
        if (list.length > 0) {
          this.search.bigtypeid = list[0].id;
          this.getGoods();
        }
      }






    }
  },
  computed: {},
  watch: {},
  created() {

    this.init();

    //
   // getTq({ city: "西安市" });

    let userid = localStorage.getItem("userid");
    if (userid) {

      this.getarea();
    } else {
      this.$router.push({ path: '/login', query: {} });
    }

  },
  mounted() {

    Bus.$on('val', (data) => {

      console.log("data", data);
      this.getarea();

    })
    var that = this;

    window.setCity = async function (data) {


      localStorage.setItem("city", data);
      if (that.tq == "") {
        let tq = await getTq({ city: data });
        console.log("tq", tq.data);
        if (tq.status == 200) {
          that.tq = tq.data.condition;
          that.day = tq.day;
          that.week = tq.week;
        }

      }



    };

  },
};
</script>
<style>
.van-grid-item__content {
  border-radius: 15px;
  border: none !important;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.active {
  color: #000;
}

.home {
  width: 100%;

  .top {
    width: 100%;
    height: 340px;

    background-size: 100% 100%;
    position: relative;
    background-position: -1px;

    img {
      width: 100%;
      height: 100%;
      position: absolute;

    }
  }

  .tq {
    width: 100%;
    height: 120px;
    display: flex;
    flex-direction: row;
    background: #8accfc;
    color: #ffffff;
    font-size: 0.35rem;
  }

  .center {
    width: 100%;
    min-height: 68vh;
    padding: 30px;
    background: linear-gradient(to bottom,
        rgb(129, 194, 250),
        rgb(172, 224, 253),
        #fff);

    .tab {
      font-size: 34px;
      color: #8397a6;
      display: flex;
      align-items: center;

      div~div {
        margin-left: 30px;
      }
    }

    .home-equiment {
      margin-top: 20px;
      margin-bottom: 20px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .add {
        width: 100%;
        height: 150px;
        border-radius: 15px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        color: #666;

        span {
          margin-left: 20px;
        }
      }

      .e-item {
        width: 47%;
        display: flex;
        height: 150px;
        justify-content: space-around;
        background-color: #fff;
        border-radius: 15px;
        align-items: center;
        margin-bottom: 20px;

        .left {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .left> :first-child {
          font-size: 34px;
          font-weight: 500;
          margin-bottom: 10px;
        }
      }
    }

    .text {
      font-size: 30px;

      p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /*将对象作为弹性伸缩盒子模型显示*/
        -webkit-line-clamp: 2;
        /*限制文本的行数，只显示2行*/
        -webkit-box-orient: vertical;
        /*设置或检索伸缩盒对象的子元素的排列方式 */
      }

      span {
        color: rgb(94, 154, 246);
        font-weight: 600;
        font-size: 30px;
      }

      :last-child {
        font-weight: 600;
        font-size: 40px;
      }
    }
  }
}
</style>